'use client'
import React, { useState, useEffect } from 'react'
import {
  UserCircleIcon, CircleStackIcon, BookOpenIcon, CalendarIcon, ChatBubbleLeftEllipsisIcon, BanknotesIcon, ClipboardDocumentListIcon, Cog6ToothIcon, ListBulletIcon, TvIcon, ClipboardIcon, ArchiveBoxIcon, UserGroupIcon, RectangleStackIcon

} from '@heroicons/react/24/solid'
import { useRouter, usePathname } from 'next/navigation'
import { useAppContext } from '@/context/app-context'

const Menu = () => {
  const { isCurrentWorkspaceEditor, isCurrentWorkspaceDatasetOperator, userProfile } = useAppContext()
  let menuItems = [
    { id: 1, label: '用户管理', icon: UserCircleIcon },
    { id: 2, label: '模型管理', icon: CircleStackIcon },
    { id: 3, label: '智能体管理', icon: CalendarIcon },
    { id: 4, label: '知识库管理', icon: BookOpenIcon },
    { id: 5, label: '在线会话', icon: ChatBubbleLeftEllipsisIcon },
    { id: 6, label: '模型监控', icon: BanknotesIcon },
    { id: 7, label: '模型通道', icon: ClipboardIcon },
    // { id: 8, label: '模型授权', icon: ArchiveBoxIcon },
    { id: 9, label: '对话溯源', icon: UserGroupIcon },
    { id: 10, label: '缓存监控', icon: ArchiveBoxIcon },
    { id: 11, label: '数据归纳', icon: RectangleStackIcon },
    { id: 12, label: '在线用户', icon: UserCircleIcon },
    { id: 13, label: '日志管理', icon: ClipboardDocumentListIcon },
    { id: 14, label: '系统管理', icon: Cog6ToothIcon },
    // { id: 15, label: '系统工具', icon: ListBulletIcon },
    { id: 16, label: '系统监控', icon: TvIcon },
  ]
  let menuItems2 = [
    { id: 1, label: '用户管理', icon: UserCircleIcon },
    { id: 2, label: '模型管理', icon: CircleStackIcon },
    { id: 3, label: '智能体管理', icon: CalendarIcon },
    { id: 4, label: '知识库管理', icon: BookOpenIcon },
    { id: 5, label: '在线会话', icon: ChatBubbleLeftEllipsisIcon },
    { id: 6, label: '模型监控', icon: BanknotesIcon },
    { id: 7, label: '模型通道', icon: ClipboardIcon },
    // { id: 8, label: '模型授权', icon: ArchiveBoxIcon },
    { id: 9, label: '对话溯源', icon: UserGroupIcon },
    { id: 10, label: '缓存监控', icon: ArchiveBoxIcon },
    { id: 11, label: '数据归纳', icon: RectangleStackIcon },
    { id: 12, label: '在线用户', icon: UserCircleIcon },
    { id: 13, label: '日志管理', icon: ClipboardDocumentListIcon },
    { id: 14, label: '系统管理', icon: Cog6ToothIcon },
    // { id: 15, label: '系统工具', icon: ListBulletIcon },
    { id: 16, label: '系统监控', icon: TvIcon },
  ]
  const [selectedId, setSelectedId] = useState(1);
  const router = useRouter()
  const pathname = usePathname()
  useEffect(() => {
    if (['/apps'].includes(pathname) || pathname.includes('/workflow') || pathname.includes('/configuration')) {
      setSelectedId(3)
    } else if (['/datasets', '/datasets/create'].includes(pathname) || pathname.includes('/dataset')) {
      setSelectedId(4)
    } else if (['/user'].includes(pathname)) {
      setSelectedId(1)
    } else if (['/model'].includes(pathname)) {
      setSelectedId(2)
    }
    // if (userProfile.email != 'admin@admin.com') {
    //   menuItems=[
    //     { id: 4, label: '知识库管理', icon: BookOpenIcon },
    //   ]
    // }
  }, [])
  const handleMenuItemClick = (id) => {
    if (id > 4) return;
    if (userProfile.email != 'admin@admin.com') {
      return;
    }
    setSelectedId(id)
    if (id == 1) {
      router.push('/user')
    } else if (id == 2) {
      router.push('/model')
    } else if (id == 3) {
      router.push('/apps')
    } else if (id == 4) {
      router.push('/datasets')
    }
  }
  return (
    <div className='relative flex items-center justify-betweenw-full bg-background-body'>
      <div className="flex flex-col items-center w-full px-2 pt-5 space-y-2" >
        {menuItems.filter(item => {
          if (userProfile.email == 'admin@admin.com') {
            return true;
          } else {
            if (item.id == 4) {
              return true;
            } else {
              false
            }
          }
        }).map(item => (
          <button
            key={item.id}
            onClick={() => handleMenuItemClick(item.id)}
            className={`w-full flex items-center pl-5  py-3 rounded-md transition-all duration-200 text-left ${selectedId === item.id
              ? 'bg-blue-600 text-white'
              : 'text-black-700 hover:bg-blue-100'
              }`}
          >

            <item.icon className="w-5 h-5 mr-2" />
            {/* <UserCircleIcon className="w-5 h-5" /> */}
            <span>{item.label}</span>
          </button>
        ))}
      </div>
    </div >
  )
}
export default Menu
